<style lang="less" scoped>
    .comments {padding: 10px 0 10px 20px;
        /*查询条件*/
        .comments-form {text-align: left;
            .form-item.search {width: 40%;}
            .form-item.last {padding-top: 35px;}
            .form-item {width: 15%;float: left;padding-right: 20px;
                & /deep/ .el-form-item {width: 100%;margin-right: 0;margin-bottom: 0;
                    .el-input__inner {border: 1px solid #dcdfe6;border-radius: 4px;}
                    .el-form-item__label {font-size: 14px;line-height: 36px;color: #666;padding-bottom: 0;}
                }
            }
        }
        /*搜索结果*/
        .search-content {
            .type-list {height: 34px;margin-top: 22px;
                .type-item.active {color: #409eff;}
                .type-item {margin-right: 10px;color: #acacac;}
            }
            .work-list {
                .work-item {width: 25%;padding: 10px;background: #fff;
                    .work-info {background: #f8f8f8;padding: 10px;align-items: normal;
                        .img {width: 70px;
                            .el-image {width: 100%;height: 90px;}
                        }
                        .title {flex: 1;padding: 0 10px;font-size: 12px;line-height: 17px;color: #222;}
                    }
                    .comment-list {padding: 0 9px;
                        .user-info {padding: 10px 0;
                            .img {width: 34px;height: 34px;
                                img {width: 100%;height: 100%;border-radius: 50%;}
                            }
                            .name {font-size: 14px;color: #222;padding-left: 10px;}
                        }
                        .tags {
                            .el-tag {margin-right: 6px;margin-bottom: 9px;border-radius: 10px;}
                        }
                        .comment-item {
                            .txt {font-size: 12px;line-height: 17px;color: #222;}
                            .time {font-size: 12px;color: #666;line-height: 28px;}
                            .children {background: #f8f8f8;padding: 10px;
                                .children-item {margin-bottom: 10px;}
                            }
                        }
                        .reply {padding-top: 20px;
                            & /deep/ .el-textarea__inner {background: #f8f8f8;border: solid 1px #e5e5e5;font-size: 12px;}
                        }
                    }
                }
            }
        }
    }
</style>
<template>
    <div class="comments">
        <!--查询条件-->
        <div class="comments-form">
            <el-form class="clearfix" label-position="top" label-width="80px" :model="formData" :inline="true">
                <div class="search form-item">
                    <el-form-item label="粉丝标签">
                        <el-input v-model="formData.name" suffix-icon	="el-icon-search"></el-input>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item label="互动选择">
                        <el-select v-model="formData.name" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item label="矩阵分类">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </div>
                <div class="form-item">
                    <el-form-item label="作品筛选">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </div>
                <div class="form-item last">
                    <el-form-item label="">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!--搜索结果-->
        <div class="search-content">
            <div class="type-list box-left">
                <div class="type-item active">智能排序</div>
                <div class="type-item">社交权重度</div>
                <div class="type-item">评论次数</div>
                <div class="type-item">评论时间</div>
            </div>
            <!-- <vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy> -->

            <div class="work-list">
                <div class="work-item">
                    <div class="work-info box-left">
                        <div class="img">
                            <el-image src="../../assets/logo.png" fit="fit"></el-image>
                        </div>
                        <div class="title">作品内容占位字符作品内容占位字符，作品内容占位字符作品内容占位字符作品内容</div>
                    </div>
                    <div class="comment-list">
                        <div class="user-info box-left">
                            <div class="img">
                                <img src="../../assets/logo.png" alt="图片">
                            </div>
                            <div class="name">名称</div>
                        </div>
                        <div class="tags">
                            <el-tag size="mini">标签一</el-tag>
                            <el-tag size="mini">标签一</el-tag>
                            <el-tag size="mini">标签一</el-tag>
                        </div>
                        <div class="comment-item">
                            <div class="txt">
                                评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容
                            </div>
                            <div class="time">
                                2019.10.12 18:30:01
                            </div>
                            <div class="children">
                                <div class="children-item">
                                    <div class="user-info box-left">
                                        <div class="img">
                                            <img src="../../assets/logo.png" alt="图片">
                                        </div>
                                        <div class="name">名称名称</div>
                                    </div>
                                    <div class="txt">
                                        评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容
                                    </div>
                                    <div class="time">
                                        2019.10.12 18:30:01
                                    </div>
                                </div>
                                <div class="children-item">
                                    <div class="user-info box-left">
                                        <div class="img">
                                            <img src="../../assets/logo.png" alt="图片">
                                        </div>
                                        <div class="name">名称名称名称</div>
                                    </div>
                                    <div class="txt">
                                        评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容占位字符评论内容
                                    </div>
                                    <div class="time">
                                        2019.10.12 18:30:01
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="reply">
                            <el-input type="textarea" v-model="formData.name" placeholder="请输入回复内容" resize="none"></el-input>
                            <div class="reply-btn"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import vueWaterfallEasy from 'vue-waterfall-easy'
    export default{
        name: 'comments',
        components: {
            vueWaterfallEasy
        },
        //数据
        data() {
            return {
                // 请求参数
                formData: {
                    name: ''
                },
                // TODO 暂用
                options: [
                    {value: '选项1', label: '黄金糕'}
                ]
            }
        },
        //组件
        components: {},
        //初始化数据
        mounted(){
        },
        //方法
        methods: {},
        //计算属性
        computed: {},
        //监听数据变化
        watch: {}
    }
</script>
